<template>
  <div v-if="menus.length > 0">
    <template v-for="item in menus" :key="item.path">
      <t-submenu v-if="item.children && item.children?.length > 0" :value="item.path">
        <template #title>
          <span>{{ item.title }}</span>
        </template>

        <t-menu-item v-for="subItem in item.children" :key="subItem.path" :value="subItem.path">
          {{ subItem.title }}
        </t-menu-item>
      </t-submenu>

      <t-menu-item v-else :value="item.path">
        <!-- <template #icon>
          <t-icon name="dashboard" />
        </template> -->
        <span>{{ item.title }}</span>
      </t-menu-item>
    </template>
  </div>
</template>

<script setup lang="ts">
import { MenuRoute } from '@/types/interface';
import { PropType } from 'vue';

defineProps({
  menus: {
    type: Object as PropType<Array<MenuRoute>>,
    required: true,
    default: () => []
  }
})

</script>

<style scoped lang="less">
.side-nav-item {
  -el-menu-item-height: 40px;
}

.side-nav-sub-item {
  -el-menu-item-height: 40px;
  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
}
</style>
